<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column h3")
            div(class="flex-column-item flex-center-center")
              span ----临基率设置----
            div(class="flex-column-item flex-3")
              div(class="flex-row")
                div(class="flex-row-item flex-7",style="height:100%")
                  div(class="flex-column")
                    div(class="flex-column-item", v-for="(menu,index) in currentPageMenus")
                      div(class="flex-row")
                        div(class="flex-row-item flex-7")
                          span(class="iconfont",:style="{'visibility': index == currentMenuIndex? 'visible' : 'hidden'}") &#xe62c;
                          span {{menu.name}}
                        div(class="flex-row-item left",v-if="!menu.isAction")
                          control-amount(v-model="currentPageMenus[index]",:working="menu.working",:ref="'ref' + menu.id")
                        div(class="flex-row-item flex-0",v-if="!menu.isAction")
                          span {{menu.unit}}

                div(class="flex-row-item",style="height:100%")
                  control-line(:total="menus.length",:current="activeId",style="float:right")

</template>

<script>
    import TemporaryBasicRateMode from "@/model/TemporaryBasicRate";

    var repo = new TemporaryBasicRateMode();

    import dayjs from 'dayjs';

    import MenuList from '@/mixins/MenuList'

    export default {
        mixins:[MenuList],
        // 取消方波输入
        data() {
            const still = this.getStillMinute();
            const amount = this.getAmount();

            return {
                page: {skipCount: 0},
                amountVisible: false,
                repo: repo,
                isOn: window.rate.temp.isOn,
                menus:[
                    {
                        name: "持续时间:",
                        id: 0,
                        value: window.rate.temp.stillMinutes,
                        amount: still,
                        unit: "h",
                        max: 24,
                        min: 0,
                        increment: 1,
                        working: false,
                        onChange(model){
                            window.rate.temp.stillMinutes = model.value;
                        }
                    },
                    {
                        name: "临基率:",
                        id: 1,
                        value: window.rate.temp.percentage,
                        amount: amount,
                        unit:  "%",
                        max: 200,
                        min: 0,
                        increment: 10,
                        working: false,
                        onChange(model){
                            window.rate.temp.percentage = model.value
                        }
                    },
                    {
                        name: window.rate.temp.isOn ? "取消临基输注" : "开始临基输注",
                        id: 2,
                        isAction: true
                    }
                ]
            };
        },
        computed: {
            currentMenuRef(){
                return 'ref' + this.currentMenu.id;s
            }
        },
        methods: {
            // 持续时间
            getStillMinute() {
                if (!window.rate.temp.isOn) return 0;
                return dayjs().diff(dayjs(window.rate.temp.startAt), "hour");
            },
            getAmount() {
                if (!window.rate.temp.isOn) {
                    return window.rate.temp.value.value == "percentage" ? 100 : 0;
                } else {
                    return window.rate.temp.value.value == "percentage" ?
                        window.rate.temp.percentage :
                        window.rate.temp.deviation;
                }
            },
            up() {
                if (this.currentMenu.working) {
                   this.$refs[this.currentMenuRef][0].up();
                } else {
                    this.activeId --;
                }
            },
            down() {
                if (this.currentMenu.working) {
                    this.$refs[this.currentMenuRef][0].down();
                } else {
                    this.activeId ++;
                }
            },

            back() {
                if(this.currentMenu.working) {
                    this.currentMenu.working = false;
                }else{
                    this.$router.push("/base-rate?index=2");
                }
            },
            yes() {
                if (this.currentMenu.isAction) {
                    if (window.rate.temp.isOn) {
                        // 停止临基率输注
                        window.rate.temp.isOn = false;
                    } else {
                        // 开始临基率输注
                        window.rate.temp.isOn = true;
                        window.rate.temp.startAt = new Date();
                    }

                    this.$router.push("/");
                } else{
                    this.currentMenu.working = !this.currentMenu.working;
                }
            }
        }
    };
</script>